<template>
	<view>
		<view class="risk-tab-top">
			<view class="risk-tab-cont" @click="tabChange(index)" v-for="(item,index) in tabList " :class="[activeIndex == index?'risk-active':'']"
			 :key="index">{{item}}</view>
			<view class="risk-active-line" :class="[activeIndex == 0?'risk-active-line-f':'risk-active-line-r']"></view>
		</view>
		<view class="risk-cont">
			<BookingPprogress :activeIndex="activeIndex"></BookingPprogress>
			<OnShelf :activeIndex="activeIndex"></OnShelf>
		</view>
	</view>
</template>

<script>
	import BookingPprogress from "@/components/common/end-title/booking-progress.vue"
	import OnShelf from "@/components/common/end-title/on-shelf.vue"
	export default {		
		components: {
			BookingPprogress,
			OnShelf
		},		
		data() {
			return {
				tabList: ['详情', '评价'],
				activeIndex: 0
			};
		},
		methods: {
			tabChange(val) {
				this.activeIndex = val;
				console.log(val);
				}
			}
		}
</script>

<style lang="scss">
	.risk-tab-top {
		color:#2A2A2A;
		display: flex;
		flex-direction: row;
		padding: 41rpx 0 12rpx 41rpx;
		background-color: #FFFFFF;		
		position: relative;
		border-bottom: 1rpx solid #E6E6E6;

		.risk-tab-cont {
			cursor: pointer;
			width:64rpx;			
			font-size:30rpx;
			margin-right: 67rpx;					
		}

		.risk-active {
			color:#2A2A2A;
			font-weight: bold;
			font-size:30rpx;
			font-family:PingFang;
			font-weight:bold;
		}

		.risk-active-line {
			width: 64rpx;
			height:5rpx;
			background: #FFC933;
			position: absolute;
			bottom: 0;
			transition: all 0.3s ease;
		}

		.risk-active-line-f {
			left:5%;
		}

		.risk-active-line-r {
			left:22.5%;
		}
	}

	.risk-cont {
		width: 100%;
		padding-top:23rpx;
		height: auto;
		background-color: #FFFFFF;
	}
</style>
